<template>
  <div class="dashboard-editor-container">
    <!-- <github-corner class="github-corner"  margin-top:12px;  /> -->

    <el-row style="width: 86.3%; top: 6px; z-index: 999; position: fixed">
      <el-col :span="5" class="card-box">
        <!-- <i class="el-icon-s-data" /><span style="font-weight:600;color:#666;margin-right: 450px;margin-left: 5px;">
          销售总览
        </span> -->
        <el-cascader
          class="region"
          v-model="queryParams.salesGrade"
          placeholder="选择店铺分组"
          :options="cascadeList"
          :props="{ checkStrictly: true }"
          @change="handleChange"
          style="width: 300px; height: 30px"
        >
        </el-cascader>
      </el-col>
      <el-col :span="12" style="background-color: #f5f5f5; height: 30px">
        <nav id="navbar">
          <!-- <ul>
            <li :class="{ active: isActiveSection(1) }">
              <a href="#section1" @click="scrollToSection(1)">销售总览</a>
            </li>
            <li :class="{ active: isActiveSection(2) }">
              <a href="#section2" @click="scrollToSection(2)">渠道排行</a>
            </li>
            <li :class="{ active: isActiveSection(3) }">
              <a href="#section3" @click="scrollToSection(3)">店铺排行</a>
            </li>
            <li :class="{ active: isActiveSection(4) }">
              <a href="#section4" @click="scrollToSection(4)">库存分析</a>
            </li>
            <li :class="{ active: isActiveSection(5) }">
              <a href="#section5" @click="scrollToSection(5)">地区排行</a>
            </li>
          </ul> -->
        </nav>
      </el-col>
      <el-col :span="7">
        <date
          v-model="valueTime"
          :type.sync="groupType"
          @handleChangeTime="handleChangeTime($event)"
        ></date>
      </el-col>
      <!-- <timeSearch @getDateArr="getDateArr" @changDay="changDay" :timeArr="timeArr" :dayActive="this.dayActive"
        :dayLimit="1095" /> -->
    </el-row>

    <!-- <section id="section1">
      <el-row
        style="background: #fff; padding: 20px 16px 0; margin-bottom: 32px"
      >
        <h4
          style="
            font-weight: 500;
            color: #666;
            margin-left: 5px;
            margin-top: 25px;
          "
        >
          <i class="el-icon-s-data" style="margin-right: 5px" />销售总览
        </h4>
        <panel-group
          @handleSetLineChartData="handleSetLineChartData"
          :biNumberOfItem="this.biNumberOfItem"
          :biNumberItem="this.biNumberItem"
        />
      </el-row>
      
      <el-row
        style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
      >
        <chartData :chart-data="echartData" />
      </el-row>
    </section> -->
    <!-- <section>
      <el-card>
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="" prop="firstLevelColumn">
            <el-select
              v-model="queryParams.firstLevelColumn"
              placeholder="请选择一级类目"
              clearable
              multiple
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_product_pl"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="secondLevelColumn">
            <el-select
              v-model="queryParams.secondLevelColumn"
              placeholder="请选择三级类目"
              clearable
              multiple
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_product_cycle"
                :key="dict.label"
                :label="dict.label"
                :value="dict.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="productSeason">
            <el-select
              v-model="queryParams.productSeason"
              placeholder="请选择商品-季节"
              clearable
              multiple
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_product_jijie"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="designFabricName">
            <el-select
              v-model="queryParams.designFabricName"
              clearable
              multiple
              filterable
              placeholder="主面料名称"
              @keyup.enter.native="handleQuery"
            >
              <el-option
                v-for="(item, index) in mianliao"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="operationLevel">
            <el-select
              v-model="queryParams.operationLevel"
              placeholder="请选择运营-层级"
              clearable
              multiple
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_product_level"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              >导出</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>

          <el-form-item label="" prop="newProStartTime">
            <timeSearch
              @getDateArr="getDateArr"
              @changDay="changDay"
              :timeArr="timeArr"
              :dayActive="this.dayActive"
              :dayLimit="1095"
            />
          </el-form-item>
          <br />
          <el-form-item label="" prop="operationMainProducts">
            <el-input
              v-model="queryParams.operationMainProducts"
              placeholder="商品-主推款"
              clearable
              @keyup.enter.native="handleQuery"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="" prop="isNewList">
            <el-select
              v-model="queryParams.isNewList"
              placeholder="新老品"
              clearable
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_sale_view"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>
    </section> -->

    <!-- <section id="section1">    
      <el-row :gutter="10" style="padding: 16px 0">
        <el-col :span="24">         
          <el-card>
            <div
              slot="header"
              style="display: flex; justify-content: space-between"
            >
              <span><i class="el-icon-collection"></i> 商品排行榜</span>
              <el-select
                v-model="queryParams.itemType"
                placeholder="产品视角"
                clearable
                @change="changeView"
              >
                <el-option
                  v-for="dict in dict.type.sys_product_view.slice(2, 6)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                />
              </el-select>
            </div>
            <el-table
              :maxHeight="ItemDateList.length ? tableHeight : 'auto'"
              :data="ItemDateList"
              highlight-current-row
              style="width: 100%"
              ref="table"
              @cell-click="goodstableEdit"
            >
              
              <el-table-column
                width="60"
                label="排名"
                type="index"
              ></el-table-column>
              <el-table-column
                width="60"
                label="产品图"
                align="center"
                prop="picUrl"
                ><template slot-scope="scope">
                  <el-popover
                    effect="light"
                    trigger="click"
                    placement="left"
                    width="auto"
                    v-show="scope.row.picUrl"
                  >
                    <template #default>
                      <img
                        :src="pjtUrl + scope.row.picUrl"
                        style="width: 800px; height: 600px; object-fit: contain"
                      />
                    </template>
                    <template #reference>
                      <img
                        :src="pjtUrl + scope.row.picUrl"
                        style="width: 20px; height: 20px; object-fit: contain"
                      />
                    </template>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="颗粒度" align="center" prop="itemGrade">
                <template slot-scope="scope">
                  <div
                    v-if="queryParams.itemType == 'item'"
                    style="
                      color: rgb(37, 137, 255);
                      cursor: pointer;
                      text-decoration: underline;
                    "
                    @click="gotoSku(scope.row)"
                  >
                    {{ scope.row.itemGrade }}
                  </div>
                  <span v-else>{{ scope.row.itemGrade }}</span>
                  
                </template>
              </el-table-column>
              <el-table-column
                label="销售金额"
                align="center"
                prop="salesAmount"
              >
                <template slot-scope="scope">
                  {{ scope.row.salesAmount }}
                </template>
              </el-table-column>
              
              <el-table-column
                width="100"
                label="退款金额"
                align="center"
                prop="returnAmount"
              />
              <el-table-column
                width="100"
                label="净销售额"
                align="center"
                prop="netSalesAmount"
              ></el-table-column>

              <el-table-column
                width="100"
                label="综合退货率"
                align="center"
                prop="comprehensiveReturnRate"
              >
                <template slot-scope="scope">
                  <div>
                    {{ (scope.row.comprehensiveReturnRate * 100).toFixed(2) }}%
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                width="100"
                label="总销售件数"
                align="center"
                prop="totalSalesNumber"
              ></el-table-column>

              <el-table-column
                width="100"
                label="净销售件数"
                align="center"
                prop="netSalesNumber"
              />
              <el-table-column
                width="100"
                label="毛利额"
                align="center"
                prop="grossProfit"
              />
              <el-table-column
                width="100"
                label="毛利率"
                align="center"
                prop="grossProfitRate"
              >
                <template slot-scope="scope">
                  <div>{{ (scope.row.grossProfitRate * 100).toFixed(2) }}%</div>
                </template>
              </el-table-column>
              <el-table-column
                width="100"
                label="发货前退货数"
                align="center"
                prop="returnBeforeShipmentNumber"
              />
              <el-table-column
                width="100"
                label="发货后退货数"
                align="center"
                prop="returnAfterShipmentNumber"
              />
              <el-table-column
                width="100"
                label="总退货件数"
                align="center"
                prop="totalReturnNumber"
              />
              <el-table-column
                width="100"
                label="库存"
                align="center"
                prop="endingInventory"
              />
              <el-table-column
                width="100"
                label="采购在途"
                align="center"
                prop="salesGrossProfit"
              />
              <el-table-column
                width="100"
                label="SD单件数"
                align="center"
                prop="sdNumber"
              />
              <el-table-column
                width="100"
                label="MJX单件数"
                align="center"
                prop="mjxNumber"
              />
              <el-table-column
                width="100"
                label="可售天数"
                align="center"
                prop="saleDays"
              />
              <el-table-column
                width="100"
                label="上新时间"
                align="center"
                prop="newTime"
              />
              <el-table-column
                width="100"
                label="是否新品"
                align="center"
                prop="isNew"
              />
              <el-table-column
                width="100"
                label="售罄率"
                align="center"
                prop="exhaustionRate"
              >
                <template slot-scope="scope">
                  <div>{{ (scope.row.exhaustionRate * 100).toFixed(2) }}%</div>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card>
            <div slot="header">
              <span><i class="el-icon-pie-chart"></i> 渠道排行分析</span>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <div ref="usedmemory" style="height: 380px" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section> -->
    <!-- @selection-change="handleSelectionChange" -->
    <section id="section3" style="margin-bottom: 32px">
      <el-card>
        <div
          slot="header"
          style="display: flex; justify-content: space-between"
        >
          <span><i class="el-icon-collection"></i> 划分词排行榜</span>
        </div>

        <el-table
          v-loading="loading"
          :data="PartWordList"
          @cell-click="tableEdit"
        >
          <el-table-column
            label="划分词"
            align="center"
            prop="label"
            width="130"
            :show-overflow-tooltip="true"
          />

          <el-table-column label="访客数" align="center" prop="visitors" />
          <el-table-column label="访客%" align="center" prop="visitorRate">
            <template slot-scope="scope">
              {{ scope.row.visitorRate }}%
            </template>
          </el-table-column>
          <el-table-column
            label="环比访客"
            align="center"
            prop="chainVisitors"
          />
          <el-table-column
            label="访客变化"
            align="center"
            prop="visitorChange"
          />
          <el-table-column
            label="访客环比%"
            align="center"
            prop="visitorChain"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.visitorChain }}%
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="支付金额"
            align="center"
            prop="payAmount"
          />
          <el-table-column label="金额%" align="center" prop="payAmountRate">
            <template slot-scope="scope">
              {{ scope.row.payAmountRate }}%
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="环比金额"
            align="center"
            prop="chainPayAmount"
          />
          <el-table-column
            width="100"
            label="金额变化"
            align="center"
            prop="payAmountChange"
          />
          <el-table-column
            width="100"
            label="金额环比%"
            align="center"
            prop="payAmountChain"
          >
            <template slot-scope="scope">
              {{ scope.row.payAmountChain }}%
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="支付转化率"
            align="center"
            prop="payConversionRate"
          >
            <template slot-scope="scope">
              {{ scope.row.payConversionRate }}%
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="环比转化率"
            align="center"
            prop="chainPayConversionRate"
          >
            <template slot-scope="scope">
              {{ scope.row.chainPayConversionRate }}%
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="转化率环比%"
            align="center"
            prop="payConversionRateChain"
          >
            <template slot-scope="scope">
              {{ scope.row.payConversionRateChain }}%
            </template>
          </el-table-column>
          <el-table-column
            label="加购人数"
            align="center"
            prop="addPurchasePeoNum"
          />
          <el-table-column
            label="环比加购"
            align="center"
            prop="chainAddPurchase"
          />
          <el-table-column
            label="加购变化"
            align="center"
            prop="addPurchaseChange"
          />
          <el-table-column
            label="加购率"
            align="center"
            prop="addPurchaseRate"
          />
          <el-table-column
            label="客单价"
            align="center"
            prop="customerUnitPrice"
          />
          <el-table-column
            :render-header="renderheader"
            :label="'支付\n买家数'"
            align="center"
            prop="payBuyers"
          />
          <el-table-column
            width="100"
            label="下单金额"
            align="center"
            prop="orderAmount"
          />
          <el-table-column
            label="下单买家数"
            align="center"
            prop="orderBuyers"
          />
          <el-table-column
            label="下单转化率"
            align="center"
            prop="orderConversionRate"
          >
            <template slot-scope="scope">
              {{ scope.row.orderConversionRate }}%
            </template>
          </el-table-column>

          <el-table-column label="UV价值" align="center" prop="uvValue" />

          <el-table-column
            :render-header="renderheader"
            :label="'关注\n店铺人数'"
            align="center"
            prop="shopAttentionNum"
          />
          <el-table-column
            :render-header="renderheader"
            :label="'收藏商品\n买家数'"
            align="center"
            prop="collectGoodsBuyers"
          />

          <el-table-column
            :render-header="renderheader"
            :label="'直接\n支付买家数'"
            align="center"
            prop="directPayBuyers"
          />
          <el-table-column
            :render-header="renderheader"
            :label="'收藏商品\n支付买家数'"
            align="center"
            prop="collectGoodsPaidBuyers"
          />
          <el-table-column
            :render-header="renderheader"
            :label="'粉丝\n支付买家数'"
            align="center"
            prop="buyersPaidFans"
          />
          <el-table-column
            :render-header="renderheader"
            :label="'加购商品\n支付买家数'"
            align="center"
            prop="addPurchasesBuyersPaid"
          />
          <el-table-column
            label="新访客数"
            align="center"
            prop="newVisitorNum"
          />
        </el-table>
      </el-card>
    </section>
    <section id="section1">
      <el-card>
        <div
          slot="header"
          style="display: flex; justify-content: space-between"
        >
          <span><i class="el-icon-collection"></i> 关键词排行榜</span>
        </div>
        <div ref="tableDom">
          <el-table
            v-loading="loading"
            :data="BiKeywordDwdList"
            :maxHeight="BiKeywordDwdList.length ? tableHeight : 'auto'"
            @cell-click="tableEdit"
          >
            <el-table-column
              label="关键词"
              align="center"
              prop="sourceName"
              width="130"
              :show-overflow-tooltip="true"
            />

            <el-table-column label="访客数" align="center" prop="visitors" />
            <!-- <el-table-column label="访客%" align="center" prop="visitorRate">
              <template slot-scope="scope">
                {{ scope.row.visitorRate }}%
              </template>
            </el-table-column>
            <el-table-column
              label="环比访客"
              align="center"
              prop="chainVisitors"
            />
            <el-table-column
              label="访客变化"
              align="center"
              prop="visitorChange"
            />
            <el-table-column
              label="访客环比%"
              align="center"
              prop="visitorChain"
              width="100"
            >
              <template slot-scope="scope">
                {{ scope.row.visitorChain }}%
              </template>
            </el-table-column> -->
            <el-table-column
              width="100"
              label="支付金额"
              align="center"
              prop="payAmount"
            />
            <!-- <el-table-column label="金额%" align="center" prop="payAmountRate">
              <template slot-scope="scope">
                {{ scope.row.payAmountRate }}%
              </template>
            </el-table-column>
            <el-table-column
              width="100"
              label="环比金额"
              align="center"
              prop="chainPayAmount"
            />
            <el-table-column
              width="100"
              label="金额变化"
              align="center"
              prop="payAmountChange"
            />
            <el-table-column
              width="100"
              label="金额环比%"
              align="center"
              prop="payAmountChain"
            >
              <template slot-scope="scope">
                {{ scope.row.payAmountChain }}%
              </template>
            </el-table-column> -->
            <el-table-column
              width="100"
              label="支付转化率"
              align="center"
              prop="payConversionRate"
            >
              <template slot-scope="scope">
                {{ scope.row.payConversionRate }}%
              </template>
            </el-table-column>
            <!-- <el-table-column
              width="100"
              label="环比转化率"
              align="center"
              prop="chainPayConversionRate"
            >
              <template slot-scope="scope">
                {{ scope.row.chainPayConversionRate }}%
              </template>
            </el-table-column>
            <el-table-column
              width="100"
              label="转化率环比%"
              align="center"
              prop="payConversionRateChain"
            >
              <template slot-scope="scope">
                {{ scope.row.payConversionRateChain }}%
              </template>
            </el-table-column> -->
            <el-table-column
              label="加购人数"
              align="center"
              prop="addPurchasePeoNum"
            />
            <!-- <el-table-column
              label="环比加购"
              align="center"
              prop="chainAddPurchase"
            />
            <el-table-column
              label="加购变化"
              align="center"
              prop="addPurchaseChange"
            />
            <el-table-column
              label="加购率"
              align="center"
              prop="addPurchaseRate"
            /> -->
            <el-table-column
              label="客单价"
              align="center"
              prop="customerUnitPrice"
            />
            <el-table-column
              :render-header="renderheader"
              :label="'支付\n买家数'"
              align="center"
              prop="payBuyers"
            />
            <el-table-column
              width="100"
              label="下单金额"
              align="center"
              prop="orderAmount"
            />
            <el-table-column
              label="下单买家数"
              align="center"
              prop="orderBuyers"
            />
            <el-table-column
              label="下单转化率"
              align="center"
              prop="orderConversionRate"
            >
              <template slot-scope="scope">
                {{ scope.row.orderConversionRate }}%
              </template>
            </el-table-column>

            <el-table-column label="UV价值" align="center" prop="uvValue" />

            <el-table-column
              :render-header="renderheader"
              :label="'关注\n店铺人数'"
              align="center"
              prop="shopAttentionNum"
            />
            <el-table-column
              :render-header="renderheader"
              :label="'收藏商品\n买家数'"
              align="center"
              prop="collectGoodsBuyers"
            />

            <el-table-column
              :render-header="renderheader"
              :label="'直接\n支付买家数'"
              align="center"
              prop="directPayBuyers"
            />
            <el-table-column
              :render-header="renderheader"
              :label="'收藏商品\n支付买家数'"
              align="center"
              prop="collectGoodsPaidBuyers"
            />
            <el-table-column
              :render-header="renderheader"
              :label="'粉丝\n支付买家数'"
              align="center"
              prop="buyersPaidFans"
            />
            <el-table-column
              :render-header="renderheader"
              :label="'加购商品\n支付买家数'"
              align="center"
              prop="addPurchasesBuyersPaid"
            />
            <el-table-column
              label="新访客数"
              align="center"
              prop="newVisitorNum"
            />
          </el-table>
        </div>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-card>
    </section>

    <section id="section" style="padding: 32px">
      <el-row :gutter="20" class="data_section" style="margin-bottom: 30px">
        <el-col :span="24">
          <!-- <el-row> -->
          <!-- {{ pjtUrl + itemData.picUrl }}-->
          <!-- {{ itemData.picFullUrl }} -->
          <!-- style="width: 150px" -->
          <!-- {{ productNo }} -->
          <!-- <div style="">
            <span>
              关键词：<el-select
                v-model="productNo"
                clearable
                filterable
                remote
                :remote-method="getDatas"
                placeholder="请输入"
                @change="testAdd"
              >
                <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </span>
          </div> -->

          <panel-group
            @handleSetLineChartData="handleSetLineChartData"
            :itemData="itemData"
          />
        </el-col>
      </el-row>
      <el-row style="background: #fff; padding: 32px 32px">
        <chartData :chart-data="echartDataI" />
      </el-row>
      <el-row
        style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
      >
        <chartDataI :echartDataSku="echartDataSku" />
      </el-row>
    </section>

    <!-- <section id="section2">
      <el-row
        style="background: #fff; padding: 0px 16px 0; margin-bottom: 32px"
      >
        
        <h4
          style="
            font-weight: 500;
            color: #666;
            margin-left: 5px;
            margin-top: 25px;
          "
        >
          <span
            ><i
              class="el-icon-s-data"
              style="margin-right: 5px"
            />趋势分析</span
          >
          <span style="margin-left: 700px">款号：{{ productNo }}</span>
        </h4>

        <chartData :chart-data="echartDataI" />
      </el-row>
    </section> -->

    <!-- <section id="section2">
      <el-row :gutter="10" style="background: #fff; padding: 16px 16px">
        <el-col :span="12">         
          <el-card>
            <div
              slot="header"
              style="display: flex; justify-content: space-between"
            >
              <span><i class="el-icon-collection"></i> skc分析</span>
              
            </div>
            
            <el-table
              :maxHeight="skcitemData.length ? tableHeight : 'auto'"
              :data="skcitemData"
              :height="pageHeight"
              highlight-current-row
              style="width: 100%"
              
            >
              
              <el-table-column
                width="110"
                label="spu"
                align="center"
                prop="spu"
              ></el-table-column>
              <el-table-column
                width="125"
                label="skc"
                align="center"
                prop="skc"
              ></el-table-column>
              <el-table-column
                width="90"
                label="颜色"
                align="center"
                prop="colorProperty"
              />
              <el-table-column
                width="90"
                label="库存"
                align="center"
                prop="endingInventory"
              />
              <el-table-column
                width="90"
                label="采购在途"
                align="center"
                prop="salesGrossProfit"
              />
              <el-table-column
                width="90"
                label="销量"
                align="center"
                prop="netSalesNumber"
              />
              <el-table-column
                width="90"
                label="净销售额"
                align="center"
                prop="netSalesAmount"
              ></el-table-column>
              <el-table-column
                width="90"
                label="可售天数"
                align="center"
                prop="saleDays"
              ></el-table-column>
            </el-table>
            
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div
              slot="header"
              style="display: flex; justify-content: space-between"
            >
              <span><i class="el-icon-pie-chart"></i> 颜色库销比</span>
              <el-button type="primary" @click="selectAll"
                >查看完整数据</el-button
              >
            </div>
            <div
              class="el-table el-table--enable-row-hover el-table--medium chart-container"
            >
              <MixChart
                :id="'MixChart'"
                :chartData="echartData"
                @SetLineChartData="SetLineChartData"
                height="410px"
                width="830px"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <section id="section2">
      
      <el-row :gutter="10" style="background: #fff; padding: 20px 16px 0">
        <el-col :span="12">
          <el-card style="height: calc(100vh - 500px)">
            <div slot="header">
              <span><i class="el-icon-collection"></i> 颜色分析</span>
            </div>
            <el-table
              :data="skuitemData"
              :height="pageHeight"
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column
                width="110"
                label="spu"
                align="center"
                prop="spu"
              ></el-table-column>
              
              <el-table-column
                width="110"
                label="颜色"
                align="center"
                prop="colorProperty"
              />
              <el-table-column
                width="110"
                label="尺码 "
                align="center"
                prop="proSize"
              ></el-table-column>
              <el-table-column
                width="90"
                label="库存"
                align="center"
                prop="endingInventory"
              />
              <el-table-column
                width="90"
                label="采购在途"
                align="center"
                prop="salesGrossProfit"
              />
              <el-table-column
                width="90"
                label="销量"
                align="center"
                prop="netSalesNumber"
              />
              <el-table-column
                width="90"
                label="净销售额"
                align="center"
                prop="netSalesAmount"
              ></el-table-column>
              <el-table-column
                width="90"
                label="可售天数"
                align="center"
                prop="saleDays"
              ></el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div slot="header">
              <span><i class="el-icon-pie-chart"></i> 尺码库销比</span>
            </div>
            <div
              class="el-table el-table--enable-row-hover el-table--medium chart-container"
            >
              <MinChart
                :id="'MinChart'"
                :minchartData="echartDataMin"
                height="410px"
                width="830px"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section> -->
    <!-- 添加或修改产品一级信息对话框  @close="handleClose"-->
    <el-dialog
      :visible.sync="open"
      width="95%"
      height="100%"
      append-to-body
      v-if="open"
      @close="handleClose"
    >
      <div class="el-dialog-div">
        <MixChart
          :id="'MixAllChart'"
          :chartData="echartData"
          @SetLineChartData="SetLineChartData"
          :height="'50%'"
          :width="'100%'"
        />
        <MinChart
          :id="'MinAllChart'"
          :minchartData="echartDataMin"
          :height="'50%'"
          :width="'100%'"
        />
      </div>
    </el-dialog>
    <!-- <tendency :sevenDate='sevenDate' :sevenDay='sevenDay'></tendency> -->
  </div>
</template>

<script>
import {
  listBiKeywordDwd,
  getBiKeywordDwd,
  delBiKeywordDwd,
  addBiKeywordDwd,
  updateBiKeywordDwd,
  selectByConditionList,
  selectPartWordList,
  selectKeyWordStatistics,
} from "@/api/keyword/BiKeywordDwd";
import * as echarts from "echarts";
import date from "./day/date.vue";
import day from "./day/day.vue";
import chartDataI from "./components/chartDataI";
import chartData from "./components/chartData";
import timeSearch from "./day/day.vue";
// import GithubCorner from '@/components/GithubCorner'
import PanelGroup from "./components/PanelGroup";
import PanelGroupI from "./components/PanelGroupI";
// import LineChart from './components/LineChart'
import {
  itemSaleData,
  skcByItemSaleList,
  queryContentByKey,
  selectItemStatistics,
  skuBySkcSaleList,
} from "@/api/sku/sku";
// queryContentByKey,
// selectItemStatistics,
// src\views\example\Charts\MixChart.vue
import MixChart from "@/views/sku/Chart/MixChart.vue";
import MinChart from "@/views/sku/Charts/MinChart.vue";
// import RaddarChart from './components/RaddarChart'
// import PieChart from './components/PieChart'
// import BarChart from './components/BarChart'
import {
  listBiSkuSaleDwd,
  getBiSkuSaleDwd,
  delBiSkuSaleDwd,
  addBiSkuSaleDwd,
  updateBiSkuSaleDwd,
  selectItemDateList,
} from "@/api/sku/BiSkuSaleDwd";
// selectItemStatistics,
import { listBrandChannelShop } from "@/api/chart/brandChannelShop";
import {
  listFabric,
  getFabric,
  delFabric,
  addFabric,
  updateFabric,
  selectFabricNameList,
  synProDesignFabricByIds,
} from "@/api/data/Fabric";
// import TransactionTable from './components/TransactionTable'
// import TodoList from './components/TodoList'
// import BoxCard from './components/BoxCard'

export default {
  name: "Admin",
  dicts: [
    "sys_product_view",
    "sys_product_qudao",
    "sys_product_size",
    "sys_product_design",
    "sys_product_scene",
    "sys_product_coder",
    "sys_product_yf",
    "sys_product_cycle",
    "sys_product_pl",
    "sys_product_jijie",
    "sys_product_level",
    "sys_sale_view",
  ],
  components: {
    // skc
    MixChart,

    // sku
    MinChart,
    // GithubCorner,
    PanelGroup,
    PanelGroupI,
    // LineChart,

    // RaddarChart,
    // PieChart,
    // BarChart,

    chartData,
    chartDataI,
    // TransactionTable,
    // TodoList,
    // BoxCard
    timeSearch,
    date,
    day,
  },
  data() {
    return {
      //划分词
      PartWordList: [],
      BiKeywordDwdList: [],
      //总览数据
      itemData: {},
      productNo: "",
      options: [], // 选项，从后端传递过来
      open: false,
      //skc列表
      skcitemData: [],
      //sku列表
      skuitemData: [],
      echartData: {
        // order: {
        xData: [],
        female: [],
        male: [],
        average: [],
      },
      echartDataMin: {
        // order: {
        xData: [],
        female: [],
        male: [],
        average: [],
      },
      loading: false,
      //面料名称
      mianliao: [],
      //纵向滚动条
      tableHeight: "",
      // 总条数
      total: 0,

      //商品排行
      ItemDateList: [],
      //产品视角
      productView: "item",
      //店铺SaleTop
      shopSaleTopList: [],
      //渠道SaleTop
      channelSaleTopList: [],
      // 统计店铺信息
      commandstats: null,
      //统计渠道信息
      usedmemory: null,
      //锚点
      sections: document.querySelectorAll("section"),
      activeSection: null,
      active: null,
      scrollTimer: null,
      //地区前20
      TopSallist: [],
      tableHeight: window.innerHeight - 175,
      pageHeight: window.innerHeight - 540,
      //BI指标数据
      biNumberItem: [],
      biNumberSku: [],
      //时间控件
      timeObj: {},
      //客单价
      biNumberOfItem: "",

      //时间控件
      valueTime: new Date(new Date().setDate(new Date().getDate() - 1)),
      // valueTime: "",
      groupType: "date",

      highlighted: ["访客数"], // 初始化时，前两个元素高亮

      //传递数据, "退款金额", "净销售额"
      echartDataI: {
        columns: ["支付日期", "访客数"],
        rows: [],
      },
      highlightedSku: ["访客数"], // 初始化时，前两个元素高亮

      //Sku传递数据
      echartDataSku: {
        columns: ["支付日期", "访客数"],
        rows: [],
      },
      //时间
      //
      dayActive: 90,
      timeArr: [
        // { value: "2", label: "昨天" },
        // { value: "7", label: "最近7天" },
        // { value: "30", label: "日" },
        // { value: "56", label: "周" },
        // { value: "365", label: "月" },
        // { value: "1", label: "自定义" },
        { value: "90", label: "新品时间" },
      ],
      timeGap: { startTime: "", endTime: "" },
      // 店铺
      cascadeList: [],
      //, "天猫", "vfu运动旗舰店"
      value: ["VFU"],
      loading: false,
      //店铺名称
      shopName: "",
      pjtUrl: process.env.VUE_APP_BASE_API,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // productNo: null,
        // manufacturerCode: null,
        // salePrice: null,
        // tagPrice: null,
        firstLevelColumn: null,
        secondLevelColumn: null,
        // logoPosition: null,
        // purchasingReportAttachments: null,
        designFabricNameList: null,
        productSeason: null,
        operationMainProducts: null,
        operationLevel: null,

        itemType: "item",
        salesGrade: ["VFU"],
        endTime: null,
        startTime: null,
        dateType: null,
        isNewList: null,
        newProStartTime: null,
        newProEndTime: null,
        itemOne: null,
        label: null,
        // dictType: undefined,
      },
    };
  },
  created() {
    // console.log(1111111111);
    // var timeGap = JSON.parse(localStorage.getItem("objGap"));
    // if (timeGap) {
    //   console.log(JSON.stringify(timeGap));
    //   //   Object.assign(this.$data.valueTime, new Date(timeGap.valueTime));
    //   //   // this.groupType = timeGap.dateType;
    //   // this.$set(this.valueTime, timeGap.valueTime);
    //   this.valueTime = new Date(timeGap.startTime);
    //   //   this.$forceUpdate;
    //   //   // val = new Date(timeGap.startTime);
    //   //   // this.$emit("input", val);
    //   //   // this.timeObj.startTime = new Date(timeGap.startTime),
    //   //   //   this.timeObj.endTime = new Date(timeGap.endTime),
    // }
    // var storeForm = JSON.parse(localStorage.getItem("skuadminParams"));
    // if (storeForm) {
    //   // this.$set(this.queryParams, storeForm)
    //   this.queryParams = storeForm;
    //   this.getselectItemDateList(this.queryParams);
    // }
    // // var otherVal = JSON.parse(localStorage.getItem("skuadmin"));
    // // if (otherVal) {
    // //   this.$set(this.queryParams, "pageNum", otherVal.currentPage);
    // //   this.$set(this.queryParams, "pageSize", otherVal.pageSize);

    // //   // this.Nowscroll = otherVal.scrollTop
    // //   // this.scrollLeft = otherVal.scrollLeft
    // // }

    //面料名称
    this.getmianliao();
    // this.handleChangeTime()
    /** 查询品牌渠道店铺关系列表 */
    this.getdataSourceList();
    // this.openLoading();
  },
  mounted() {
    var _this = this;
    this.resizeTable();
    window.onresize = function () {
      _this.resizeTable();
    };
    window.addEventListener("scroll", this.startScrollTimer);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.startScrollTimer);
  },
  //记得清空  如果在keepalive中 则使用activated  deactivated
  destroyed() {
    window.onresize = null;
  },
  methods: {
    //表头
    renderheader(h, { column, $index }) {
      return h("div", {}, [
        h("div", {}, column.label.split("\n")[0]),
        h("div", {}, column.label.split("\n")[1]),
      ]);
    },

    /* 获取货号列表 */
    getDatas(key) {
      console.log(JSON.stringify(key));
      // this.loading = true;
      // return
      queryContentByKey({ keyWord: key }).then((res) => {
        // this.loading = false;
        this.options = res.data;
        console.log(JSON.stringify(this.options));
      });
    },
    //状态改变
    changeTheme(val) {},
    //面料名称
    getmianliao() {
      this.loading = true;
      selectFabricNameList().then((response) => {
        // console.log(JSON.stringify(response));
        this.mianliao = response;
        // console.log(JSON.stringify(this.FabricList));
        // this.total = response.total;
        this.loading = false;
      });
    },

    //锚点
    scrollToSection(index) {
      const target = this.sections[index];
      // console.log(JSON.stringify(index));
      //     return
      this.active = index;
      if (target) {
        this.$nextTick(() => {
          target.scrollIntoView({ behavior: "smooth" });
          this.activeSection = target;
        });
      }
    },
    //锚点
    startScrollTimer() {
      this.scrollTimer = setInterval(() => {
        const currentSection = document.querySelector("section[data-active]");
        if (currentSection !== this.activeSection) {
          this.activeSection = currentSection;
        } else {
          clearInterval(this.scrollTimer);
        }
      }, 100); // 每100毫秒检查一次滚动位置是否变化
    },
    //锚点高亮
    isActiveSection(sectionId) {
      // 检查当前导航项是否处于高亮状态
      return this.active === sectionId;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      // this.getList();
      console.log(JSON.stringify(this.queryParams));
      if (!this.queryParams.itemType) {
        this.$modal.msgError("请选择产品视角");
        return;
      }
      this.handleChange();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {};

      this.resetForm("queryForm");
      this.ItemDateList = [];
      this.total = 0;
      this.echartDataI.rows = [];
      this.queryParams.salesGrade = ["VFU"];
      this.queryParams.itemType = "item";

      this.valueTime = new Date(new Date().setDate(new Date().getDate() - 1));
      // this.handleQuery();
    },
    //新老品时间控件
    changDay(val) {
      this.dayActive = val;
      this.timeGap.startTime = val[0];
      this.timeGap.endTime = val[1];
    },
    getDateArr(value) {
      this.timeGap.startTime = value[0];
      this.timeGap.endTime = value[1];
      console.log(JSON.stringify(this.dayActive));
      console.log(JSON.stringify(this.timeGap));

      this.queryParams.newProStartTime = this.timeGap.startTime;
      this.queryParams.newProEndTime = this.timeGap.endTime;
    },
    //店铺控件
    handleChange(val) {
      console.log(JSON.stringify(val));

      // var lastElement = val.pop();
      // this.shopName = lastElement

      // console.log(this.dayActive);
      // let obj = {
      //   salesGrade: this.value.join(","),
      //   ...this.timeObj,
      //   item: this.productView,
      //   ...this.queryParams,
      // };
      // console.log(JSON.stringify(obj));
      // var skuadminParams = JSON.parse(localStorage.getItem("skuadminParams"));
      // if (skuadminParams) {
      //   this.getselectItemDateList(skuadminParams);
      //   localStorage.setItem("skuadminParams", JSON.stringify(skuadminParams));
      // } else {
      // (this.queryParams.salesGrade = this.value.join(",")),
      this.queryParams.startTime = this.timeObj.startTime;
      this.queryParams.endTime = this.timeObj.endTime;
      this.queryParams.dateType = this.timeObj.dateType;
      // this.queryParams.item = this.productView;
      if (!this.queryParams.endTime) {
        return;
      } else {
        //一级
        this.getPartWordList();
        //二级
        this.getList();
      }
      // }
      let param = {
        dataSource: this.value,
        startTime: this.dateFormat(this.timeObj.startTime),
        endTime: this.dateFormat(this.timeObj.endTime),
        dataType: this.groupType,
      };
      console.log(JSON.stringify(param));
      if (!param.endTime) {
        return;
      } else {
        // this.getechartChannelData(obj)
        // this.getnumberOfItem(param);
        // this.getTopSal(param);
      }
    },

    //选完时间后发请求
    handleChangeTime(timeObj) {
      // console.log(type)
      // console.log(timeObj)
      // TODO
      this.timeObj = timeObj;
      console.log(JSON.stringify(this.timeObj));
      // let obj = {
      //   salesGrade: this.value.join(","),
      //   ...timeObj,
      //   item: this.productView,
      //   ...this.queryParams,
      // };
      // var skuadminParams = JSON.parse(localStorage.getItem("skuadminParams"));
      // if (skuadminParams) {
      //   this.getselectItemDateList(skuadminParams);
      //   localStorage.setItem("skuadminParams", JSON.stringify(skuadminParams));
      // } else {
      if (!this.queryParams.itemType) {
        this.$modal.msgError("请选择产品视角");
        return;
      }
      this.queryParams.pageNum = 1;
      // (this.queryParams.salesGrade = this.value.join(",")),
      this.queryParams.startTime = this.timeObj.startTime;
      this.queryParams.endTime = this.timeObj.endTime;
      this.queryParams.dateType = this.timeObj.dateType;
      // this.queryParams.item = this.productView;
      if (!this.queryParams.endTime) {
        return;
      } else {
        //二级
        this.getPartWordList();
      }

      let param = {
        dataSource: this.value,
        startTime: this.dateFormat(timeObj.startTime),
        endTime: this.dateFormat(timeObj.endTime),
        dataType: this.groupType,
      };
      console.log(JSON.stringify(param));
      if (!param.endTime) {
        return;
      } else {
        // this.getechartChannelData(obj)
        //客件数
        // this.getnumberOfItem(param);
        // //地区Top20
        // this.getTopSal(param);
      }
    },
    // 二级
    getList() {
      this.loading = true;
      selectByConditionList(this.queryParams).then((response) => {
        // this.BiKeywordDwdList = response.rows ? response.rows : [];

        this.total = response.total;
        var l = [];
        if (response.rows.length > 0) {
          response.rows.forEach((item, index) => {
            item.id = index;
            l.push(item);
          });
        }
        console.log(JSON.stringify(l));
        this.BiKeywordDwdList = l;
        this.loading = false;
      });
    },
    // 一级
    getPartWordList() {
      this.loading = true;
      selectPartWordList(this.queryParams).then((response) => {
        this.PartWordList = response ? response : [];
        // this.total = response.total;
        if (response.length > 0) {
          this.getList();
        }
        this.loading = false;
      });
    },
    //视图角度
    changeView(val) {
      if (!this.queryParams.endTime) {
        this.$modal.msgError("请选择时间");
        return;
      }
      // let obj = {
      //   salesGrade: this.value.join(","),
      //   ...this.timeObj,
      //   item: val,
      //   dataType: this.groupType,
      //   ...this.queryParams,
      // };
      this.openLoading();
      selectItemDateList(this.queryParams).then((response) => {
        this.$modal.closeLoading();
        this.ItemDateList = response.rows;
        // this.total = response.total;
        this.goodstableEdit(response.rows[0]);

        // console.log(JSON.stringify(this.ItemDateList));
      });
    },
    //跳转
    gotoSku(row) {
      let objGap = {
        value: this.value,
        // salesGrade: this.value.join(","),
        timeObj: this.timeObj,
        ...this.queryParams,
        itemOne: row.itemGrade,
        valueTime: this.valueTime,
      };
      console.log(JSON.stringify(objGap));
      return;
      localStorage.setItem("objGap", JSON.stringify(objGap));
      //
      this.$router.push({ path: "/sku/manage" });
    },
    testAdd(key) {
      // let obj = {
      //   salesGrade: this.value.join(","),
      //   ...this.timeObj,
      //   itemOne: this.productNo,
      // };
      // console.log(JSON.stringify(obj));
      // if (!obj.endTime) {
      //   return;
      // } else {
      //   this.getitemSaleData(obj);
      //   this.getskcData(obj);
      //   this.selectItemStatisticsEcharts(obj);
      // }
    },
    //页面加载数据
    getselectItemDateList(obj) {
      // var otherVal = JSON.parse(localStorage.getItem("skuadmin"));
      // if (otherVal) {
      //   // this.$set(this.queryParams, "pageNum", otherVal.currentPage);
      //   // this.$set(this.queryParams, "pageSize", otherVal.pageSize);

      //   this.Nowscroll = otherVal.scrollTop;
      //   this.scrollLeft = otherVal.scrollLeft;
      // }
      this.loading = true;
      console.log(JSON.stringify(obj));
      this.openLoading();
      selectItemDateList(obj).then((response) => {
        this.$modal.closeLoading();
        this.ItemDateList = response.rows;
        // this.total = response.total;

        if (response.rows.length > 0) {
          this.goodstableEdit(response.rows[0]);
        }
        this.loading = false;

        // console.log(JSON.stringify(this.ItemDateList));
      });
    },
    goodstableEdit(row, column, cell, event) {
      if (!row) {
        return;
      }
      this.productNo = row.itemGrade;
      let obj = {
        // salesGrade: this.value.join(","),
        salesGrade: this.queryParams.salesGrade.join(","),
        ...this.timeObj,
        item: this.queryParams.itemType,

        itemOne: row.itemGrade,
      };

      // // console.log(JSON.stringify());

      // selectItemStatistics(obj).then((response) => {
      //   var row = [];
      //   response.forEach((item) => {
      //     // console.log(1111111111111111);
      //     // console.log(JSON.stringify(item[column.property]));
      //     // console.log(1111111111111111);
      //     row.push({
      //       支付日期: item.payDateUnit,
      //       销售金额: item.salesAmount,
      //       退款金额: item.returnAmount,
      //       净销售额: item.netSalesAmount,
      //       总销售件数: item.totalSalesNumber,
      //       净销售件数: item.netSalesNumber,
      //       发货前退货件数: item.returnBeforeShipmentNumber,
      //       发货后退货件数: item.returnAfterShipmentNumber,
      //       总退货件数: item.totalReturnNumber,
      //       综合退货率: item.comprehensiveReturnRate,
      //       毛利额: item.grossProfit,
      //       毛利率: item.grossProfitRate,
      //       净销售额: item.netSalesAmount,
      //       期末库存: item.endingInventory,
      //       售罄率: item.exhaustionRate,
      //       SD单件数: item.sdNumber,
      //       MJX单件数: item.mjxNumber,
      //     });
      //   });

      //   this.echartDataI.rows = row;
      //   if (!column) {
      //     // column.property = column[3].property;
      //     return;
      //   }

      //   let type = this.get_chinese_name_by_en_name(column.property);
      //   if (this.highlighted.includes(type)) {
      //     return;
      //   }
      //   // 移除旧的高亮元素
      //   this.highlighted.shift();
      //   // // 添加新的高亮元素
      //   this.highlighted.push(type);

      //   console.log(JSON.stringify(this.highlighted));
      //   var arr = ["支付日期"];
      //   let array = arr.concat(this.highlighted);
      //   // let temp = arr.push(type)
      //   // console.log(JSON.stringify(temp));
      //   // var array = ["支付日期", "退款金额", "净销售额", "毛利率"];
      //   var rateItem;

      //   // 遍历数组，找到包含'率'字的元素
      //   for (var i = 0; i < array.length; i++) {
      //     if (array[i].includes("率")) {
      //       rateItem = array[i];
      //       break;
      //     }
      //   }

      //   // 如果找到了包含'率'字的元素，将其移到数组最后
      //   if (rateItem) {
      //     var index = array.indexOf(rateItem);
      //     if (index !== array.length - 1) {
      //       array.splice(index, 1);
      //       array.push(rateItem);
      //     }
      //   }

      //   console.log(array);
      //   this.echartDataI.columns = array;
      // });
      if (this.queryParams.itemType == "item") {
        this.getitemSaleData(obj);
        this.getskcData(obj);
        this.selectItemStatisticsEcharts(obj);
      }
    },
    //获取总览数据
    getitemSaleData(obj) {
      itemSaleData(obj).then((response) => {
        console.log(JSON.stringify(response));
        this.itemData = response ? response : {};
        // if (response) {
        //   this.itemData = response;
        // }
      });
    },
    tableEdit(row, column, cell, event) {
      console.log(JSON.stringify(row));
      if (row.sourceName) {
        this.productNo = row.sourceName;
        this.queryParams.keyWordGrade = "二级关键字";
        this.queryParams.inputValue = this.productNo;
        if (row.id % 2 === 0) {
          console.log("偶数");
          this.selectKeyWordStatisticsEchartsI();
        } else {
          console.log("奇数");
          this.selectKeyWordStatisticsEchartsII();
        }
      } else {
        this.productNo = row.label;
        this.queryParams.label = row.label;
        this.queryParams.keyWordGrade = "一级关键字";
        //二级
        this.getList();
        this.queryParams.inputValue = this.productNo;
        if (row.id % 2 === 0) {
          console.log("偶数");
          this.selectKeyWordStatisticsEchartsI();
        } else {
          console.log("奇数");
          this.selectKeyWordStatisticsEchartsII();
        }
      }
      this.itemData = row;

      // console.log(JSON.stringify(column.property));
      // let obj = {
      //   salesGrade: this.value.join(","),
      //   ...this.timeObj,
      //   // item: this.productView,
      //   skcOne: row.skc,
      // };
      // this.getskuBySkcSaleList(obj);
    },
    //曲线分析
    selectKeyWordStatisticsEchartsI() {
      selectKeyWordStatistics(this.queryParams).then((response) => {
        // if (response.length <= 0) {
        //   return;
        // }
        var row = [];
        response.forEach((item) => {
          row.push({
            支付日期: item.dataDate,
            访客数: item.salesAmount,
            支付转化率: item.payConversionRate,
            支付金额: item.payAmount,
            客单价: item.customerUnitPrice,
            下单金额: item.orderAmount,
            下单买家数: item.orderBuyers,
            下单转化率: item.orderConversionRate,
            支付买家数: item.payBuyers,
            UV价值: item.uvValue,
            关注店铺人数: item.shopAttentionNum,
            收藏商品买家数: item.collectGoodsBuyers,
            加购人数: item.addPurchasePeoNum,
            直接支付买家数: item.directPayBuyers,
            粉丝支付买家数: item.buyersPaidFans,
            收藏商品支付买家数: item.collectGoodsPaidBuyers,
            加购商品支付买家数: item.addPurchasesBuyersPaid,
            新访客数: item.newVisitorNum,
          });
        });
        console.log(JSON.stringify(row));

        this.echartDataI.rows = row;
      });
    },
    //曲线分析
    selectKeyWordStatisticsEchartsII() {
      selectKeyWordStatistics(this.queryParams).then((response) => {
        // if (response.length <= 0) {
        //   return;
        // }
        var row = [];
        response.forEach((item) => {
          row.push({
            支付日期: item.dataDate,
            访客数: item.salesAmount,
            支付转化率: item.payConversionRate,
            支付金额: item.payAmount,
            客单价: item.customerUnitPrice,
            下单金额: item.orderAmount,
            下单买家数: item.orderBuyers,
            下单转化率: item.orderConversionRate,
            支付买家数: item.payBuyers,
            UV价值: item.uvValue,
            关注店铺人数: item.shopAttentionNum,
            收藏商品买家数: item.collectGoodsBuyers,
            加购人数: item.addPurchasePeoNum,
            直接支付买家数: item.directPayBuyers,
            粉丝支付买家数: item.buyersPaidFans,
            收藏商品支付买家数: item.collectGoodsPaidBuyers,
            加购商品支付买家数: item.addPurchasesBuyersPaid,
            新访客数: item.newVisitorNum,
          });
        });
        console.log(JSON.stringify(row));

        this.echartDataSku.rows = row;
      });
    },
    //sku列表
    getskuBySkcSaleList(obj) {
      skuBySkcSaleList(obj).then((response) => {
        console.log(JSON.stringify(response));
        if (response) {
          this.skuitemData = response;

          this.echartDataMin.xData = response.map((item) => item.proSize);
          //库存
          this.echartDataMin.female = response.map(
            (item) => item.endingInventory
          );
          //在途库存
          this.echartDataMin.male = response.map(
            (item) => item.salesGrossProfit
          );
          //销量
          this.echartDataMin.average = response.map(
            (item) => item.netSalesNumber
          );
        } else {
          this.skuitemData = [];
          this.echartDataMin = {};
        }
      });
    },
    //skc图表点击
    SetLineChartData(index) {
      console.log(index);
      this.skcitemData.forEach((item) => {
        if (index == item.id) {
          let obj = {
            salesGrade: this.value.join(","),
            ...this.timeObj,
            // item: this.productView,
            skcOne: item.skc,
          };
          this.getskuBySkcSaleList(obj);
        }
      });
    },
    //查看完整数据
    selectAll() {
      let obj = {
        salesGrade: this.value.join(","),
        ...this.timeObj,
        itemOne: this.productNo,
      };
      this.getskcData(obj);
      this.open = true;
    },
    handleClose() {
      this.open = false;
      let obj = {
        salesGrade: this.value.join(","),
        ...this.timeObj,
        itemOne: this.productNo,
      };
      this.getskcData(obj);
    },
    //skc列表
    getskcData(obj) {
      skcByItemSaleList(obj).then((response) => {
        if (response) {
          response.forEach((item, index) => {
            item.id = index;
          });
          console.log(JSON.stringify(response));
          this.skcitemData = response;
          this.tableEdit(response[0]);
          //skc曲线分析x轴
          if (this.open) {
            this.echartData.xData = response.map(
              (item) => item.spu + "\n" + item.colorProperty
            );
          } else {
            this.echartData.xData = response
              .slice(0, 8)
              .map((item) => item.colorProperty);
          }
          //库存
          this.echartData.female = response.map((item) => item.endingInventory);
          //在途库存
          this.echartData.male = response.map((item) => item.salesGrossProfit);
          //销量
          this.echartData.average = response.map((item) => item.netSalesNumber);
          console.log(JSON.stringify(this.echartData));
        } else {
          //skc
          // this.skcitemData = [];
          // this.echartData = {};
          //sku
          // this.skuitemData = [];
          // this.echartDataMin = {};
        }
      });
    },
    //匹配曲线指标
    get_chinese_name_by_en_name(en_name) {
      let res = "销售金额";

      let relation = {
        salesAmount: "销售金额",
        returnAmount: "退款金额",
        // "factory_order":

        netSalesAmount: "净销售额",
        totalSalesNumber: "总销售件数",
        netSalesNumber: "净销售件数",
        returnBeforeShipmentNumber: "发货前退货件数",
        returnAfterShipmentNumber: "发货后退货件数",
        totalReturnNumber: "总退货件数",
        comprehensiveReturnRate: "综合退货率",
        grossProfit: "毛利额",
        grossProfitRate: "毛利率",
        endingInventory: "期末库存",
        exhaustionRate: "售罄率",
        sdNumber: "SD单件数",
        mjxNumber: "MJX单件数",
      };

      if (relation.hasOwnProperty(en_name)) {
        res = relation[en_name];
      }

      return res;
    },

    //指标点击回传
    handleSetLineChartData(type) {
      // 偶数
      if (this.highlighted.includes(type)) {
        return;
      }
      // 移除旧的高亮元素
      this.highlighted.shift();
      // // 添加新的高亮元素
      this.highlighted.push(type);

      console.log(JSON.stringify(this.highlighted));
      var arr = ["支付日期"];
      let array = arr.concat(this.highlighted);
      // let temp = arr.push(type)
      // console.log(JSON.stringify(temp));
      // var array = ["支付日期", "退款金额", "净销售额", "毛利率"];
      var rateItem;

      // 遍历数组，找到包含'率'字的元素
      for (var i = 0; i < array.length; i++) {
        if (array[i].includes("率")) {
          rateItem = array[i];
          break;
        }
      }

      // 如果找到了包含'率'字的元素，将其移到数组最后
      if (rateItem) {
        var index = array.indexOf(rateItem);
        if (index !== array.length - 1) {
          array.splice(index, 1);
          array.push(rateItem);
        }
      }

      console.log(array);
      this.echartDataI.columns = array;

      // 奇数
      if (this.highlightedSku.includes(type)) {
        return;
      }
      // 移除旧的高亮元素
      this.highlightedSku.shift();
      // // 添加新的高亮元素
      this.highlightedSku.push(type);

      console.log(JSON.stringify(this.highlightedSku));
      var arr = ["支付日期"];
      // let temp = arr.concat(this.highlightedSku);
      // // let temp = arr.push(type)
      // console.log(JSON.stringify(temp));
      // this.echartDataSku.columns = temp;
      let arraySku = arr.concat(this.highlightedSku);
      // let temp = arr.push(type)
      // console.log(JSON.stringify(temp));
      // var array = ["支付日期", "退款金额", "净销售额", "毛利率"];
      var rateItemSku;

      // 遍历数组，找到包含'率'字的元素
      for (var i = 0; i < arraySku.length; i++) {
        if (arraySku[i].includes("率")) {
          rateItemSku = arraySku[i];
          break;
        }
      }

      // 如果找到了包含'率'字的元素，将其移到数组最后
      if (rateItemSku) {
        var index = arraySku.indexOf(rateItemSku);
        if (index !== arraySku.length - 1) {
          arraySku.splice(index, 1);
          arraySku.push(rateItemSku);
        }
      }

      // console.log(array);
      this.echartDataSku.columns = arraySku;
    },

    // 时间格式转换
    dateFormat(date) {
      date = new Date(date);
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate() + "";
      return Y + M + D;
    },
    /** 查询品牌渠道店铺关系列表 */
    getdataSourceList() {
      listBrandChannelShop().then((response) => {
        let result = this.transformData(response.rows);
        this.cascadeList = result;
      });
    },
    //店铺渠道品牌转换

    transformData(data) {
      let result = [];

      data.forEach((item) => {
        let brand = item.brand;
        let channel = item.channel;
        let shopName = item.shopName;

        // 如果brand在结果数组中不存在，则创建一个新的数组
        let brandIndex = result.findIndex(
          (brandObj) => brandObj.label === brand
        );
        if (brandIndex === -1) {
          result.push({
            label: brand,
            value: brand,
            children: [],
          });
          brandIndex = result.length - 1;
        }

        // 如果channel在当前brand的children数组中不存在，则创建一个新的数组
        let channelIndex = result[brandIndex].children.findIndex(
          (channelObj) => channelObj.label === channel
        );
        if (channelIndex === -1) {
          result[brandIndex].children.push({
            label: channel,
            value: channel,
            children: [],
          });
          channelIndex = result[brandIndex].children.length - 1;
        }

        // 如果shopName在当前channel的children数组中不存在，则创建一个新的数组
        let shopIndex = result[brandIndex].children[
          channelIndex
        ].children.findIndex((shopObj) => shopObj.label === shopName);
        if (shopIndex === -1) {
          result[brandIndex].children[channelIndex].children.push({
            label: shopName,
            value: shopName,
            // children: []
          });
        }
      });

      return result;
    },

    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载商品排行监控数据，请稍候！");
    },
    // table自动高度
    returnTableHeight(ref, bottomOffset) {
      let height = null;
      height =
        window.innerHeight - ref.getBoundingClientRect().top - bottomOffset;
      return height;
    },

    resizeTable() {
      this.$nextTick(() => {
        this.tableHeight = this.returnTableHeight(this.$refs.tableDom, 100);
      }, 0);
    },
    /** 导出按钮操作 */
    handleExport() {
      if (this.ItemDateList.length <= 0) {
        this.$modal.msgError("暂无数据可导出");

        return;
      }
      this.download(
        "product/BiAnalysis/export",
        {
          ...this.queryParams,
        },
        `商品排行_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style lang="scss" scoped>
i.el-icon-top::before {
  color: #ff0000;
  /* 这将把颜色改为红色 */
}
i.el-icon-caret-top::before {
  color: #ff0000;
  /* 这将把颜色改为红色 */
}
i.el-icon-bottom::before {
  color: green;
  /* 这将把颜色改色 */
}
i.el-icon-caret-bottom::before {
  color: green;
  /* 这将把颜色改色 */
}

.el-dialog-div {
  height: 80vh;
  overflow-x: hidden;
}
/* 移除默认的列表样式 */
ul {
  margin-top: 0.4%;
  list-style-type: none;
  /* 设置弹性布局，使列表项横向排列 */
  display: flex;
  /* 添加一些内边距和背景颜色 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置边框和圆角 */
  // border: 1px solid #ddd;
  border-radius: 5px;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

/* 设置列表项样式 */
li {
  /* 添加一些内边距和右边距 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置链接文本样式 */
  font-size: 15px;
  color: #bbb;
  text-decoration: none;
}

li.active a {
  // color: #f00;
  /* 高亮颜色 */
  color: #fff;
  background-color: #40c9c6;
}

// section {
//   margin-top: 60px;
// }

.dashboard-editor-container {
  // padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
<style>
.el-scrollbar__wrap {
  /* overflow-x: hidden; */
  /* overflow-y: hidden; */
}
</style>
/** 访客百分比 *
private Double visitorRate:
/** 环比访客 */
private Integer chainVisitors:
/** 访客变化 */
private Integer visitorChange:
/** 访客环比 */
private Double visitorChain :
---支付金额模块
/** 支付金额 */
@Excel(name = "支付金额”)
private Double payAmount
/** 金额百分比 */
private Double payAmountRate;
/** 环比金额 */
private Double chainPayAmount:
/** 金额变化 */
private Double payAmountchange:
/** 金额环比 */
private Double payAmountchain:
--转化率模块-----
/** 支付转化率 */
@Excel(name ="支付转化率”)
private Double payConversionRate:
/** 环比转化率 */
private Double chainPayConversionRate:
/** 转化率环比 */
private Double payConversionRateChain;
￥米
川鸡爸
private Double addPurchaseRate:/** 环比加购 *
private Double chainAddPurchase :/** 加购变化 */
private Double addPurchasechange: